<template>
	<div>
		<el-dialog :title="form.id?'编辑':'新增'" :visible.sync="visible" :modal-append-to-body="false" append-to-body
			width="50%">
			<el-form :model="form" ref="form" :rules="rules" label-width="100px">
				<el-form-item label="优惠券名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入" :disabled="isEdit"></el-input>
				</el-form-item>
				<el-form-item label="优惠券类型">
					<el-radio-group v-model="form.type" :disabled="isEdit">
						<el-radio :label="1">满减优惠券</el-radio>
					</el-radio-group>
					<div v-if="form.type==1">
						<div class="color606266">满减金额 <el-input v-model="form.money" class="width200 margin-left10 margin-right10"
								:disabled="isEdit"></el-input>元
						</div>
						<div class="row-me"><span class="color606266 margin-right20">使用门槛</span>
							<div>
								<el-radio v-model="form.type2" :label="2" :disabled="isEdit">无门槛</el-radio>
								<div>
									<el-radio v-model="form.type2" :label="3" :disabled="isEdit">满<el-input
											class="width200 margin-left10 margin-right10" v-model="form.consumerMin"
											:disabled="isEdit"></el-input>
										元使用</el-radio>
								</div>
							</div>
						</div>
					</div>
					<div v-else>
						<div class="color606266">固定金额 <el-input v-model="form.money" class="width200 margin-left10 margin-right10"
								:disabled="isEdit"></el-input>元
						</div>
					</div>
				</el-form-item>
				<el-form-item label="数量" prop="count">
					<el-input v-model="form.count" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="使用时间" prop="validity">
					<el-radio-group v-model="form.validity" :disabled="isEdit">
						<el-radio :label="1">长期有效</el-radio>
						<el-radio :label="2">固定日期</el-radio>
					</el-radio-group>
					<div v-if="form.validity==2">
						<el-date-picker v-model="form.date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期" @change="onChange" value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</div>
				</el-form-item>
				<el-form-item label="使用类型" prop="useType">
					<el-select v-model="form.useType" :disabled="isEdit" @change="typeChange">
						<el-option label="商品购买" :value="1"></el-option>
						<el-option label="专题购买" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="适用商品" prop="target">
					<el-radio-group v-model="form.target" class="column-me" :disabled="isEdit">
						<el-radio :label="0" class="margin-bottom10">全部</el-radio>
						<el-radio :label="1">指定商品</el-radio>
					</el-radio-group>
					<div class="color606266 margin-top10 row-me row-center flex-wrap" v-if="form.target==1">
						<div class="border-h5 row-me center-all margin-right20 margin-bottom10" v-for="(item,index) in courseArr"
							:key="index">
							<div class="flex1" style="color: #7d7d7d;">{{item.name}}</div>
							<div class="width60 text-right">{{form.useType==1?'商品管理':form.useType==2?'专题管理':''}}</div>
						</div>
						<div class="height50 width120 row-me center-all pointer" @click="clickCommodity"
							style="border: 1px dashed #8a8d93;">
							<i class="el-icon-plus margin-right10"></i><span>选择商品</span>
						</div>
						<div>请添加已上架的商品</div>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('form')">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="选择商品" :visible.sync="commodityVisible" :modal-append-to-body="false" append-to-body width="40%">
			<ProductTopic ref="ProductTopic"></ProductTopic>
			<span slot="footer" class="dialog-footer">
				<el-button @click="commodityVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ProductTopic from '../ProductTopic';
	export default {
		props: ['isEdit', 'editForm'],
		components: {
			ProductTopic
		},
		data() {
			return {
				form: {
					type: 1,
					type2: 2,
					startTime: "",
					endTime: "",
				},
				rules: {
					name: {
						required: true,
						message: '请输入优惠券名称',
						trigger: 'blur'
					},
					type: {
						required: true,
						message: '请选择优惠券类型',
						trigger: 'change'
					},
					useType: {
						required: true,
						message: '请选择使用类型',
						trigger: 'change'
					},
					count: {
						required: true,
						message: '请输入数量',
						trigger: 'blur'
					},
					target: {
						required: true,
						message: '请选择适用商品',
						trigger: 'change'
					},
					validity: {
						required: true,
						message: '请选择使用时间',
						trigger: 'change'
					}
				},
				commodityVisible: false,
				activeName: 'first',
				tableData: [{
					content: "2020年下半年教师资格证考试套题(小学)免费"
				}],
				query: {
					pageNumber: 1,
					pageSize: 20
				},
				pageTotal: 0,
				vipVisible: false,
				courseArr: [],
				shopList: [],
				multipleSelection: [],
				oldCourseArr: [],
				visible: false
			}
		},
		mounted() {

		},
		methods: {
			typeChange() {
				this.courseArr = []
				this.oldCourseArr = []
				if (this.form.useType == 2) {
					this.getPageSubject()
				} else {
					this.getPageProduct()
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			async getPageProduct() {
				const res = await this.$get('/admin/mall/pageProduct', this.query)
				this.shopList = res.data.list
			},
			async getPageSubject() {
				const res = await this.$get('/admin/specialSubject/pageSubject', this.query)
				this.shopList = res.data.list
			},
			async show(row) {
				if (row.id) {
					const res = await this.$postForm('/admin/mall/getPreferentia', {
						id: row.id
					})
					this.form = res.data
					if (this.form.consumerMin == 0) {
						this.form.type2 = 2;
					} else {
						this.form.type2 = 3;
					}
					if (this.form.validity == 1) {
						this.form.date = ["", ""]
					} else {
						this.form.date = [this.form.startTime, this.form.endTime] || ["", ""]
					}
					if (this.form.useType == 2) {
						this.getPageSubject()
					} else {
						this.getPageProduct()
					}
					setTimeout(() => {
						this.courseArr = []
						if (this.form.objectIds && this.form.objectIds.length != 0) {
							for (let item of this.shopList) {
								for (let id of this.form.objectIds) {
									if (item.id == id) {
										this.courseArr.push(item)
									}
								}
							}
						}
					}, 500)
				} else {
					this.form = {}
				}
				this.visible = true
			},
			handleSave() {
				this.form.objectIds = this.$refs.ProductTopic.multipleSelection
				this.form.objectIds = Array.from(this.form.objectIds, ({
					id
				}) => id)
				this.courseArr = [...this.$refs.ProductTopic.multipleSelection, ...this.oldCourseArr]
				this.courseArr = [...new Set(this.courseArr.map(JSON.stringify))].map(JSON.parse)
				this.oldCourseArr = this.courseArr
				this.commodityVisible = false
			},
			onChange(val) {
				this.form.startTime = val[0]
				this.form.endTime = val[1]
			},
			clickCommodity() {
				this.commodityVisible = true
				setTimeout(() => {
					this.$refs.ProductTopic.show()
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						if (this.form.date && this.form.date.length != 0) {
							this.form.startTime = this.form.date[0]
							this.form.endTime = this.form.date[1]
						}
						const res = await this.$post('/admin/mall/addPreferentia', this.form)
						this.$message.success('操作成功')
						this.visible = false
						this.$emit('ok')
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	}
</script>

<style scoped lang="scss">
	.border-h5 {
		border: 1px solid #ccc;
		line-height: 20px;
		padding: 10px;
	}
</style>